<!---预约时段日志列表-->
<template>
  <div>
    <el-dialog
      :title="tabelType==='1'?'预约时段日志':'预约时段模板日志'"
      :visible.sync="dlgVisible"
      :destroy-on-close="true"
      width="70%"
      :before-close="handleClose">
      <div>
        <el-table
          ref="table"
          v-loading="loading"
          size="medium"
          :data="tableData"
          style="width: 100%"
          border
          class="ky-table"
          highlight-current-row
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div class="code">
                <div class="c_col">
                  <div class="c_lab">模块名称：</div>
                  <div class="c_cnt">{{scope.row.moduleName}}</div>
                </div>
                <div class="c_col">
                  <div class="c_lab">编码：</div>
                  <div class="c_cnt">{{scope.row.recordCode}}</div>
                </div>
                <div class="c_col">
                  <div class="c_lab">Sql语句：</div>
                  <div class="c_cnt">{{scope.row.sql}}</div>
                </div>
                <div class="c_col">
                  <div class="c_lab">表名：</div>
                  <div class="c_cnt">{{scope.row.tabelName}}</div>
                </div>
                <div class="c_col">
                  <div class="c_lab">内容：</div>
                  <div class="c_cnt">
                    <!-- {{scope.row.allcontent}} -->
                    <div v-html="scope.row.allcontentTxt"></div>
                  </div>
                </div>
                <div class="c_col">
                  <div class="c_lab">对比：</div>
                  <div class="c_cnt">
                    <div v-html="scope.row.allcontentContrast"></div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" label="医院名称" width="180"></el-table-column>
          <el-table-column prop="operatorName" label="操作人员" width="100"></el-table-column>
          <el-table-column prop="operatorDate" label="操作时间" width="152"></el-table-column>
          <el-table-column prop="operatorStatus" label="操作方法" min-width="120"></el-table-column>
          <!-- <el-table-column prop="" label="操作来源" width="94"></el-table-column> -->
          <el-table-column prop="ipAddress" label="IP地址" min-width="160"></el-table-column>
          <el-table-column prop="depArea" label="区域" width="100"></el-table-column>
          <el-table-column prop="dep" label="部门" width="100"></el-table-column>
          <el-table-column prop="modality" label="设备" width="100"></el-table-column>
          <el-table-column prop="remark1" label="检查机房" width="100"></el-table-column>
        </el-table>
        <div class="log_total" v-if="tableData.length>0">共：{{tableData.length}} 条</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSetuplogGetlist } from '@/api/api'
import compareInfo from '@/utils/compareInfo'
export default {
  props: {
    hospitalCode: {
      type: String,
      default: ''
    },
    appoPeriodLogDlg: {
      type: Boolean,
      default: false
    },
    id: String,
    tabelType: {
      // 1 预约时段日志， 2 预约时段模板日志
      type: String,
      default: '1'
    }
  },
  computed: {
    dlgVisible: {
      get() {
        return this.appoPeriodLogDlg
      },
      set(val) {
        this.$emit('update:appoPeriodLogDlg', val)
      }
    }
  },
  watch: {
    dlgVisible(val) {
      if (val) {
        console.log(val)
        this.getList()
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableData: []
    }
  },
  created() {
  },
  methods: {
    async getList() {
      await this.$getHospitalList()
      const params = {
        HospitalCode: this.hospitalCode,
        Id: this.id,
        TabelType: this.tabelType
      }
      this.loading = true
      getSetuplogGetlist(params).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          const _list = res.content.list
          const len = _list.length
          let count = len - 1
          while (count >= 0) {
            const item = _list[count]
            const _idx = this.mx_hospitalList.findIndex(hosp => hosp.code === item.hospitalCode)
            if (_idx >= 0) {
              item.hospitalName = this.mx_hospitalList[_idx].name
            }

            // 痕迹对比
            item.allcontentContrast = ''
            item.allcontentTxt = ''
            if (count < len - 1) {
              let op = compareInfo.eq({
                preInfo: item.allcontent,
                preInfoLabel: _list[count + 1].allcontent
              })
              item.allcontentTxt = op.preInfo
              item.allcontentContrast = op.preInfoLabel
            } else {
              item.allcontentTxt = item.allcontent
            }
            count--
          }
          this.tableData = _list
        }
      })
    },
    handleClose() {
      this.dlgVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.code{
  padding:20px;
  background-color: #263444;
  color: #fff;
  font-size: 13px;
  line-height: 1.5em;
  .c_col{
    display: flex;
    margin-bottom: 6px;
    .c_lab{
      width: 100px;
    }
    .c_cnt{
      flex: 1;
    }
  }
}
.log_total{
  font-size: 14px;
  margin-top: 20px;
}
</style>
